<template>
	<top_bg class="top">
		<template v-slot:title>
			<p>{{title}}</p>
		</template>
	</top_bg>
	<!-- <img src="../../assets/goods_left.png" class="left_btn" @click="goPrePage"> -->
	<img src="../../assets/goods_left.png" class="left_btn" @click="goPrePage">
	
	<div class="bg">
	
			<div class="cart_item">
				<img width="140" :src=picArray />
			
				<div class="right">
					<div class="p1 flex">
						<div>
							<!-- <p class="one p1" style="margin-bottom: 20px;" v-if=" item.huode !=='0'">Congratulations</p> -->
							<!-- <p class="one p2" v-if=" item.huode !=='0'" >on Winning</p> -->
												
							<p class="one p1" v-if="item.title != undefined">
								{{item.title.length > 60 ? item.title.substr(0,15)+'...':item.title}}
							</p>
							<p class="one p2">AED:{{item.yunjiage}}</p>	
							<!-- <p class="one p4">Winning code: {{item.q_user_code}}</p> -->
							
						</div>
						<!--          <img style="height: 1.5rem;" :src="require('../assets/delete.png')"
											@click="delItem(index)" /> -->
					</div>
					<p class="p1 moneyNumber">
	<!-- 					<span class="money" style="color:#EC4228">AED:{{newMoney}}</span> -->
						<!-- <van-field name="stepper">
							<template #input>
								<van-stepper v-model="value" @change="change" />
							</template>
						</van-field> -->
					<div class="order_cart_item_right">
						<!-- <p class="reduce" @click="reduce">-</p> -->
	  				</div>
					</p>
				</div>
			</div>
			
	<one_cart_item v-if="false" class="one_cart_item">

		<template v-slot:one_cart_item_img>
			<img :src=uploads_url+item.thumb class="one_cart_item_img">
		</template>

		<template v-slot:one_cart_item_desc >
			<div class="one_cart_item_description">
			<p class="one_cart_item_desc_text1" v-if=" item.huode !=='0'">Congratulations</p>
			<p class="one_cart_item_desc_text2"  v-if=" item.huode !=='0'" >on Winning</p>
			<p class="one_cart_item_desc_text3" style="font-size: 1rem" >{{item.title}}</p>
			<!-- <p>{{this.item.title}}</p> -->
			<!-- <p>{{item}}</p> -->
			<!-- <div class="cart_item_desc">
				<p>HUAWEI MateBook 16 </p>
				<p>idealzbasics credit </p>
			</div> -->
			</div>
		</template>
		<template v-slot:one_cart_item_price class="one_cart_item_price">
			<p class="one_cart_item_price_text1" style="left: 10rem; font-size: 1.2rem;">AED:{{item.yunjiage}}</p>
			<!-- 	<div class="cart_item_price">
				<p>AED30.00</p>
			</div> -->
			<!-- <p>{{item.yunjiage}}</p> -->
			<!-- 			<p class="one_cart_item_price_text2">Winning code: {{item.q_user_code}} </p>
			<p class="one_cart_item_price_text3"> {{convertTime(item.time)}}</p> -->

		</template>
		<template v-slot:one_cart_item_right>
		</template>

		<template v-slot:one_cart_item_right_del>
		</template>
		<!-- <template v-slot:one_cart_item_right>
			<div class="cart_item_right">
				<p class="reduce" @click="reduce">-</p>
				<van-field class="input_text" v-model="realValue" placeholder="1" />
				<p class="plus" @click="plus">+</p>
			</div>
		</template> -->
	</one_cart_item>


	<div class="information">
		<p class="information_text3">A total of {{this.codes.length}} lottery codes are avaliable:</p>
		<p class="one_cart_item_time_text"> {{convertTime(item.time)}}</p>
		 <div class="container" style="flex-wrap: wrap;">
		<span class="code_text" v-for="(_code, index) in displayData" :key="_code.id">
			<!-- <p>{{_code}}</p> -->
			<p v-if="item.q_user_code === _code" style="color: red;">{{_code}} </p>
			<p v-else-if="item.q_user_code !== _code" style="color: black;">{{_code}} </p>
		</span>
		</div>
		<!-- 		<p>{{addressInfo.shouhuoren}}:{{addressInfo.mobile}}</p>
		<p>{{addressInfo.jiedao}}</p>
		<p>{{addressInfo.xian}} {{addressInfo.shi}} {{addressInfo.sheng}} {{addressInfo.country}}</p> -->
	</div>
</div>
</template>

<script>
	// import prize_area_item from "../../components/prize_area_item.vue"
	import one_cart_item from "@/components/one_cart_item"
	import globalData from "@/main.js"
	import {
		convertUnixToDate,
	} from "../../util.js"

	export default {
		data() {
			return {
				title: "View code",
				state: 0,
				item: {},
				uploads_url: '',
				stateName: "",
				codes: [],
				picArray: [],
			}
		},
		computed: {
			// 计算属性，返回按照规则拼接好的字符串
			displayData() {
				let result = [];
				console.log("------this.codes.length------",this.codes.length)
				for (let i = 0; i < this.codes.length; i++) {
					if ((i + 1) % 5 === 0 || i === this.codes.length - 1) {
						// 当达到第五个元素时或者已经是最后一个元素时添加换行符
						// result += `${this.codes[i]} `;
						result.push(`${this.codes[i]} `)
						if (i !== this.codes.length - 1) {
							// result += '\n';
							result.push('\n')
						}
						console.log("------result--111----",result)
					} else {
						// 否则直接连接下一个元素
						// result += `${this.codes[i]} `;
						result.push(`${this.codes[i]} `)
						console.log("------result-xxxx-----",result)
					}
				}

				return result;
			}
		},
		components: {
			// prize_area_item,
		},
		mounted() {
			console.log("===view code mounted===")
			this.uploads_url = globalData['uploads_url']
			var info = this.$route.params.context
			var infos = info.split('|')
			for (var item in infos) {
				console.log("item info", infos[item])
			}
			var that = this
			that.item = JSON.parse(infos[0])
			var images = that.item.picarr;
			that.parsePicArr(images);
			console.log("===this.items===", that.item)
			var codes = that.item.goucode.split(",");
			console.log("===this.items codes===", codes)
			that.codes = codes;
		},
		methods: {
			goPrePage: function() {
				console.log('---返回---');
				//this.$router.go(-1);
				this.$router.back();
			},
			convertTime: function(timeStamp) {
				return convertUnixToDate(timeStamp)
			},
			parsePicArr: function(picArr) {
				//console.log("===picArr===",picArr)
				var infos = picArr.split(":");
				//console.log("===infos===",infos)
				for (var _info in infos) {
					//console.log("===_info===",infos[_info])
					//console.log("===_info===",typeof infos[_info])
					if (!infos[_info].includes("shopimg")) {
						continue
					}
					var newInfos = infos[_info].split(";");
					//console.log("===newInfos===",newInfos)
					for (var _info1 in newInfos) {
						//console.log("===newInfos[_info1]===",newInfos[_info1])
						if (!newInfos[_info1].includes("shopimg")) {
							continue
						}
			
						var imagestr = newInfos[_info1].split(";");
						//console.log("===images===",imagestr)
						var tmpIndex = 0;
						for (var _image in imagestr) {
							//console.log("imagestr[_image]",imagestr[_image])
			
							if (tmpIndex++ != imagestr.length - 1) {
								continue;
							}
							//console.log("imagestr[_image]22",imagestr[_image])
							var reg1 = new RegExp('"', "g")
							//console.log("imagestr[_image]",imagestr[_image].replace(reg1," "))
							if (imagestr[_image].includes("shopimg")) {
								//this.imageArray.push("require(\""+this.uploads_url+imagestr[_image].replace(reg1,"")+"\")")
								this.picArray = this.uploads_url + imagestr[_image].replace(reg1, "")
							}
							//console.log("===this.picArray===:",this.picArray)
						}
					}
				}
				//console.log("===this.imageArray===",this.imageArray)
			},
		}
	}
</script>

<style>
	.left_btn {
		position: absolute;
		top: 2.5rem;
		left: 1rem;
		width: 2rem;
		height: 2rem;
		/* 		width: 2rem;
		height: 3rem; */
		z-index: 1;
	}
	
	.bg {
		height: calc(100vh - 6.5rem);
		/* overflow-y: auto; */
		background-color: #f8f8f8;
		height:120vh;
	}
	
	.cart_item {
		width: 100vw;
		height: 330px;
		/* border:solid 1px red; */
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		background-color: white;
		 /* margin-bottom: 2rem; */
		margin-bottom: 20px;
		z-index: 10;
		/* style="margin-bottom: 10px; background-color: #08080808; border-radius: 10px;" */
	}
	
	.right {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		 /* padding-left: 10px; */
		font-family: 'PingFang SC';
		font-size: 0.9rem;
		/* padding:10px; */
		box-sizing: border-box;
	
		position: relative;
		/* 添加相对定位 */
		left: 15px;
	
		/* 使用负边距将其向左移动 */
	}
	
	.p1 {
		margin: 0;
		padding: 0;
	}
	
	.one.p1 {
		margin:0;
		padding:0;
		font-family: 'PingFang SC';
		font-size: 1.2rem;
		font-weight: bold;
		/* color: red; */
		margin-bottom: 40px;
	}
	.one.p2 {
		margin:0;
		padding:0;
		font-family: 'PingFang SC';
		font-size: 1rem;
		font-weight: bold;
		/* color: red; */
		margin-bottom: 40px;
	}
	.one.p3 {
		margin:0;
		padding:0;
		font-family: 'PingFang SC';
		font-size: 1rem;
		font-weight: bold;
		color: red;
		margin-left:200px;
		margin-top:-80px;
	}
	
	.title.p1 {
		margin: 0;
		padding: 0;
		margin-top:40px;
	}
	.money {
		font-size: 1.1rem;
		font-family: 'PingFang SC';
		color: #EC4228;
	}
	
	.moneyNumber {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.description {
		padding-top: 40px;
		font-size: 0.7rem;
		/* width: 100px; */
		width: 250px;
		/* border: solid 1px red; */
	}
	
	:deep(.van-field__control--custom) {
		display: flex;
		justify-content: flex-end;
		zoom: 1.5;
	}
	
	:deep(.van-stepper__input) {
		width: 30px;
	}
	
	:deep(.van-cell) {
		background-color: transparent;
	}
	
	.flex {
		display: flex;
	}
	

	.one_cart_item {
		position: relative;
		margin-top: 0.5rem;
		/* width: calc(100%-5rem); */
		/* width: 25rem; */
		height: 11rem;
		margin-left: 1rem;
		margin-right: 1rem;
		/* border: 0.1; */
		/* border-radius: 20px; */
		/* border-style: dashed; */
	}

	.one_cart_item_img {
		position: relative;
		width: 6rem;
		height: 6.5rem;
		background-color: burlywood;
		margin-top: 0.8rem;
		margin-left: 1rem;
		/* border: 0.1; */
		/* border-radius: 20px; */
		/* border-style: dashed; */
		z-index: 2;
	}
     
	.one_cart_item_description {
		/* position: relative; */
		/* width: 8rem;
		height: 7rem; */
		/* background-color: green; */
	/* 	margin-top: -7rem;
		margin-left: 8rem; */
		/* border: 0.1; */
		/* border-radius: 20px; */
		/* 	
		top: 5rem;
		font-size: 0.5rem;
 		left: 5rem; */
		/* top: 1rem; */
		/* width: 12rem; */
		/* 		font-family: 'PingFang SC';
		font-weight: bold; */
	}

	.one_cart_item_desc_text1 {
		font-family: 'PingFang SC';
		font-size: 1rem;
		font-weight: bold;
		color: red;
	}

	.one_cart_item_desc_text2 {
		font-size: 1rem;
		top: -6.5rem;
	}

	.one_cart_item_desc_text3 {
		position: relative;
		font-family: 'PingFang SC';
		font-weight: bold;
		font-size: 0.8rem;
		width: 12rem;
		top: -7rem;
		left: 8rem;
		/* background-color: green; */
		/* margin-top: -5rem;
		margin-left: -2rem; */
	}

	.one_cart_item_price_text1 {
		position: relative;
		font-size: 1rem;
		top: -5rem;
		margin-left: -2rem;
		width: 12rem;
		font-family: 'PingFang SC';
		/* font-weight: bold; */
		/* color: #EC4228; */
	}

	.one_cart_item_price_text2 {
		position: relative;
		font-size: 0.6rem;
		left: 1rem;
		top: -3rem;
		width: 12rem;
		font-family: 'PingFang SC';
		/* font-weight: bold; */
		color: #EC4228;
	}

	.one_cart_item_price_text3 {
		position: relative;
		font-size: 0.6rem;
		left: 0rem;
		top: 0rem;
		width: 12rem;
		font-family: 'PingFang SC';
		/* font-weight: bold; */
		/* color: #EC4228; */
	}

	.cart_item_right {
		position: relative;
		font-size: 0.8rem;
		left: 14rem;
		top: -10rem;
		width: 12rem;
		font-family: 'PingFang SC';
		/* font-weight: bold; */
		color: #EC4228;
	}

	.information {
		margin-top: 2rem;
		margin-left: 1rem;
		margin-right: 1rem;
		height: 30rem;
		font-family: 'PingFang SC';
		font-size: 1rem;
		/* border-radius: 20px; */
		/* border-style: dashed; */
		background-color:#f6f6f6;
	
	}
	.one_cart_item_time_text {
		font-size: 0.8rem;
		margin-left: 1rem;
		color: #88888888;
	}
	.code_text {
		font-size: 0.8rem;
		margin-left:1rem;
		margin-top: -1rem;
	}

	.information_text3 {
		margin-left: 1rem;
	}

	.multi-line {
		white-space: pre-wrap;
		/* 或者使用 pre-line */
	}
	
	.container {
	  display: flex; /* 设置为横向布局 */
	  justify-content: space-between; /* 水平居中对齐 */
	}
	 
	.text {
		margin-left: 1rem;
		margin-right: 1rem; /* 调整元素之间的距离 */
	}
</style>